<template>
	<view class="container-bg">
		<u-navbar leftIconColor="#fff" :title="goodsInfo.name" placeholder bgColor="#fff" :autoBack="true">
			<template #right>
				<image @click="hanldeCollect" class="navber-right"
					:src="isCollect ? '../../static/icon/has-like.png':'../../static/icon/no-like.png' " mode="">
				</image>
				<!-- <image class="navber-right" src="../../static/icon/share.png" mode="">
				</image> -->
			</template>
		</u-navbar>

		<view class="goods-image">
			<view class="goods-cover">
				<image :src="goodsInfo.cover" mode="widthFix"></image>
			</view>
		</view>

		<view class="goods-info">
			<view class="goods-bg">
				<view class="bottom bg-theme1 pad-24">
					<view class="font-w-600 color-white font-32">{{goodsInfo.name}}</view>
					<view class="centerY betweenX mar-top-20">
						<view class="centerY">
							<capsule color="#000" bgColor="rgba(0,0,0,.1)" :number="goodsInfo.build" title="限量">
							</capsule>
							<capsule color="#000" bgColor="rgba(0,0,0,.1)" title="流通"
								:number="goodsInfo.out_cnt - goodsInfo.broken_cnt" class="mar-left-20">
							</capsule>
						</view>
						<!-- <view class="font-24 centerY">一共有 {{codeList.length}} 个</view> -->
					</view>
				</view>
			</view>

			<!-- 盲盒奖品 -->
			<boxPrize :goodsId="goodsInfo.id" v-if="goodsInfo.type == 2"></boxPrize>

			<view class="bg-theme1 pad-24 author gap30 mar-top-20">
				<view class="pad-24 centerY betweenX">
					<view class="font-28 font-w-800 color-grey">品牌方</view>
					<view class="font-28 centerY mar-top-10">
						<image v-if="goodsInfo.issuer_info" class="logo" :src="goodsInfo.issuer_info.avatar">
						</image>
						<text v-if="goodsInfo.issuer_info"
							class="mar-left-10 color-grey">{{goodsInfo.issuer_info.name}}</text>
					</view>
				</view>
				<view class="pad-24 centerY betweenX">
					<view class="font-28 font-w-800 color-grey">创作者</view>
					<view class="font-28 centerY mar-top-10">
						<image v-if="goodsInfo.author_info" class="logo" :src="goodsInfo.author_info.avatar">
						</image>
						<text v-if="goodsInfo.author_info"
							class="mar-left-10 color-grey">{{goodsInfo.author_info.name}}</text>
					</view>
				</view>
			</view>

			<view class="betweenX bg-theme1 mar-top-20 pad-top-bottom-20 pad-left-right-24">
				<view class="font-28">
					<text class="mar-right-20 color-grey">藏品编号</text>
					<text class="font-w-600 color-theme">#{{codeInfo.code}}</text>
				</view>
			</view>

			<view class="pad-top-bottom-32 pad-left-right-24 bg-theme1 mar-top-20">
				<view class="my-font font-36 color-white">藏品介绍</view>
			</view>

			<!-- 购买须知 -->
			<pay-notes></pay-notes>

			<view class="copyright centerX">
				<image src="../../static/icon/copyright.png" mode=""></image>
			</view>
		</view>

		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-theme1 centerY font-32">
			<view v-if="codeInfo.lock_scene == 'market'" class="button flex-w" @click="hanldeCancel">取消寄售</view>
			<template v-else>
				<view class="button flex-w mar-right-30" @click="openBlindbox">开启</view>
				<view class="button flex-w mar-right-30" @click="goodsShow = true">批量开启</view>
				<view class="openBlindbox" @click="hanldePay">寄售</view>
			</template>
		</view>

		<!-- 取消寄售弹窗 -->
		<my-popup content="确认取消此寄售吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>

		<!-- 弹框 -->
		<u-popup :show="goodsShow"  bgColor="#36313B" round="12" closeable @close="goodsShow = false">
			<view class="pad-left-right-32 ">
				<view class="text-center pad-28 color-white font-32">批量开启</view>
				<view class="mar-bottom-30 font-28 color-grey">最多选择10个,已选择 <text
						class="color-theme codeNumber">{{codeIdArray.length}}</text>
					个</view>
				<view class="goods-list-box">
					<view class="goods-list rowW gap30">
						<view v-for="item in codeList" class="list centerXY radius16 bg-theme1"
							@click="hanldeAppendCode(item)">
							<view v-if="item.lock_scene =='market'">
								<view class="bg-theme color-white font-20 pad-left-right-24 pad-top-bottom-8 status">寄售中
								</view>
							</view>
							<view class="centerY color-white">
								<view class="font-16">￥</view>
								<view class="font-w-600 font-32">{{item.last_price}}</view>
							</view>
							<view class="color-grey font-24">#{{item.code}}</view>

							<image v-if="codeIdArray.indexOf(item.id) >-1" class="checked-icon"
								src="../../static/icon/checked-icon.png"></image>
						</view>
					</view>
				</view>
				<view class="pad-top-bottom-20">
					<u-button :disabled="!codeIdArray.length >0" class="confirm-button flex-w"
						@click="batchOpenBlindbox">确认开启</u-button>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	// 接口地址
	import {
		goodsDetails,
		codeDetails,
		myGoodsCodeList,
		openBlindBox,
		cancelMarket
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 顶部颜色
				bgColor: 'transparent',
				// 收藏
				isCollect: false,
				// 编号详情
				codeInfo: {},
				// 藏品详情
				goodsInfo: {},
				// 编号列表
				codeList: [],
				// 选择要开启的盲盒弹窗
				goodsShow: false,
				// 要开起的盲盒id
				codeIdArray: [],
				// 取消寄售
				isPopup: false,
			}
		},
		onLoad(options) {
			this.codeId = options.code_id;
			this.getDetails();
		},
		methods: {
			// 刷新当前详情接口
			isRefresh() {
				this.getDetails();
			},
			// 立即取消寄售
			hanldeConfirm() {
				cancelMarket({
					id: this.codeInfo.market_info.id
				}).then(res => {
					uni.$u.toast(res.msg);
					this.getDetails();
					this.isPopup = false;
				})
			},
			// 打开取消寄售弹窗
			hanldeCancel() {
				this.isPopup = true;
			},
			// 触发批量弹窗选择事件
			hanldeAppendCode(item) {
				let choseIdx = this.codeIdArray.indexOf(item.id);
				if (choseIdx > -1) {
					this.codeIdArray.splice(choseIdx, 1)
				} else {
					if (this.codeIdArray.length > 9) {
						uni.$u.toast(`最多一次开启10个`)
						return
					}
					this.codeIdArray.push(item.id);
				}
			},
			// 批量开启盲盒
			batchOpenBlindbox() {
				this.goodsShow = false;
				this.getOpenBlindbox(this.codeIdArray);
			},
			// 开启当前盲盒
			openBlindbox() {
				let codeId = [this.codeInfo.id]
				this.getOpenBlindbox(codeId);
			},
			// 公共开启盲盒
			getOpenBlindbox(codeId) {
				uni.showLoading({
					title: '开启中...'
				})
				openBlindBox({
					goods_code_ids: codeId
				}).then(res => {
					let {
						success,
						failed
					} = res.data;

					uni.setStorageSync('openSuccess', success);
					uni.setStorageSync('openFailed', failed);

					uni.redirectTo({
						url: '/pages/my/openBlindbox'
					})
					uni.hideLoading();
				})
			},
			// 获取编号详情
			getDetails() {
				codeDetails({
					id: this.codeId
				}).then(res => {
					this.codeInfo = res.data.info;
					this.hanldeGoodsInfo();

					goodsDetails({
						id: res.data.info.goods_id
					}).then(goods => {
						goods.data.info.codeInfo = res.data.info;
						this.goodsInfo = goods.data.info;
					})
				})
			},
			// 获取全部编号数据
			hanldeGoodsInfo() {
				myGoodsCodeList({
					goods_ids: [this.codeInfo.goods_id],
					lock_scene: 'normal'
				}).then(res => {
					this.codeList = res.data.lists;
				})
			},
			// 跳转立即寄售
			hanldePay() {
				uni.setStorageSync('saleGoods', this.goodsInfo);
				uni.navigateTo({
					url: '/pages/my/consignments'
				})
			},
			// 收藏
			hanldeCollect() {
				this.isCollect = !this.isCollect;
			}
		},
		// 滚动事件
		onPageScroll(e) {
			if (e.scrollTop >= 100) {
				this.bgColor = '#FFFFFF';
			} else {
				this.bgColor = 'transparent'
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-bg {
		width: 749rpx;
		background: #f7f8fb;
		background-size: cover;
		min-height: 100vh;
		background-image: url('../../static/image/login-bg.png');
		background-color: #02000b;
	}

	::v-deep .u-navbar__content {
		background-image: url('../../static/image/my-bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}

	.codeNumber {
		display: inline-block;
		margin: 0 10rpx;
	}

	.confirm-button {
		background: $uni-bg-theme;
		color: #fff;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 12rpx;
		border: 2rpx solid $uni-theme;
		box-sizing: border-box;
	}

	.goods-list-box {
		height: 800rpx;
		overflow: hidden;
		overflow-y: scroll;

		.goods-list {
			.list {
				width: 328rpx;
				height: 140rpx;
				position: relative;
				overflow: hidden;
				flex-direction: column;
				padding-top: 24rpx;
				box-sizing: border-box;

				.checked-icon {
					position: absolute;
					display: block;
					width: 40rpx;
					height: 40rpx;
					right: 10rpx;
					top: 5rpx;
				}

				.status {
					position: absolute;
					right: 0rpx;
					top: 0rpx;

					border-radius: 0 0 0 24rpx;
				}
			}
		}
	}

	.navber-right {
		width: 48rpx;
		height: 48rpx;
	}

	.openBlindbox {
		border: 2rpx solid $uni-theme;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 12rpx;
		color: $uni-theme;
		width: 220rpx;
		box-sizing: border-box;
	}


	.goods-image {
		position: relative;

		.goods-bg {
			display: block;
			width: 100%;
			height: 1124rpx;
		}

		.goods-cover {
			width: 100%;
			display: flex;
			justify-content: center;

			image {
				display: block;
				width: 100%;
			}
		}
	}

	.goods-info {
		width: 100%;
		padding-bottom: 100rpx;

		.goods-bg {
			background: $uni-bg-theme1;
		}
	}

	.logo {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
	}

	.item {
		background: url('/static/icon/product-builder-bg.png') no-repeat;
		background-size: 100% 100%;
		flex: 1;
	}

	.copy {
		display: block;
		width: 28rpx;
		height: 28rpx;
	}

	.content-title {
		font-family: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei';
	}

	.copyright {
		margin: 32rpx 0;
		padding-bottom: 150rpx;

		image {
			width: 329rpx;
			height: 55rpx;
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			margin-right: 100rpx;
		}

		.button {
			background: $uni-bg-theme;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 12rpx;
			border: 2rpx solid $uni-theme;
			box-sizing: border-box;
		}
	}
</style>